<%@include file="parts/Header.jsp" %>
<%--
    Document   : About Us
    Created on : 16/08/2011, 11:47:35 ص
    Author     : Ahmed
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html:html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Vacancies</title>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: auto; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: separate; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>
        <script>
            
            $(function() {
                var name = $( "#name" ),
                email = $( "#email" ),
                password = $( "#password" ),
                allFields = $( [] ).add( name ).add( email ).add( password ),
                tips = $( ".validateTips" );
 
                function updateTips( t ) {
                    tips
                    .text( t )
                    .addClass( "ui-state-highlight" );
                    setTimeout(function() {
                        tips.removeClass( "ui-state-highlight", 1500 );
                    }, 500 );
                }
 
                function checkLength( o, n, min, max ) {
                    if ( o.val().length > max || o.val().length < min ) {
                        o.addClass( "ui-state-error" );
                        updateTips( "Length of " + n + " must be between " +
                            min + " and " + max + "." );
                        return false;
                    } else {
                        return true;
                    }
                }
 
                function checkRegexp( o, regexp, n ) {
                    if ( !( regexp.test( o.val() ) ) ) {
                        o.addClass( "ui-state-error" );
                        updateTips( n );
                        return false;
                    } else {
                        return true;
                    }
                }
 
                $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 550,
                    width: 350,
                    modal: true
                   
                });
 
                $( "#create-user" )
                .button()
                .click(function() {
                    $( "#dialog-form" ).dialog( "open" );
                });
            });
            
            
             
        </script>
        <style type="text/css">
            .js #dialog-form {display: none;}

        </style>
        <script type="text/javascript">
            document.documentElement.className = 'js';
        </script>




    </head>
    <body onload="resizePage()">
        <center>
            <div id="innerPageContainer" >
                <table  cellpadding="0" cellspacing="0" border="0">
                    <tr>

                        <td rowspan="3" id="innerPageCell" >

                            <div  id="accordion" >



                                <div id="dialog-form" title="Create New Vacancy">
                                    <img src="styles/Images/logo2.gif"/>
                                    <p><font color="red"><b>All form fields are required.</b></font></p>

                                    <html:form action="/admin?actionType=addVacancy">
                                        <fieldset>
                                            <label for="name">vacancy Title</label>
                                            <html:text onmouseout="return valvt()" styleId="vt" property="vacancyTitle"  styleClass="text ui-widget-content ui-corner-all" />
                                            <label for="avvac">Available Vacancies</label>
                                            <html:text onmouseout="return valan()" styleId="an" property="availableVacancyNumber" styleClass="text ui-widget-content ui-corner-all" />
                                            <label for="type">Position Type</label>
                                            <html:select styleId="pt" property="positionType" styleClass="text ui-widget-content ui-corner-all">
                                                <html:option value="Full-Time">Full_Time</html:option>
                                                <html:option value="Part-Time">Part-Time</html:option>
                                                <html:option value="Part-Time/Full-Time">Part-Time/Full-Time</html:option>
                                                <html:option value="Freelancer">Freelancer</html:option>
                                            </html:select>
                                            <label for="deadline">Deadline</label>
                                            <html:text onmouseout="return valdl()" styleId="dl" property="deadline" styleClass="text ui-widget-content ui-corner-all" />
                                            <label for="ref">Reference</label>
                                            <html:text onmouseout="return valr()" styleId="r" property="refrence" styleClass="text ui-widget-content ui-corner-all" />
                                            <label for="desc">Description</label>
                                            <html:textarea onmouseout="return vald()" styleId="d" property="description" style="width:100%" styleClass="text ui-widget-content ui-corner-all" />
                                            <label for="desc">Show Vacancy</label>
                                            <html:select styleId="sv" property="showVacancy" style="width:40%" styleClass="text ui-widget-content ui-corner-all">
                                                <html:option value="yes">Yes</html:option>
                                                <html:option value="no">No</html:option>
                                            </html:select>
                                        </fieldset>
                                        <br/>
                                        <html:submit onclick="return checksubmit()"  style="margin-bottom:12px; width:30%; padding: .4em" value="Add Vacancy"/>
                                        <html:reset onclick="return reset()" value="Reset" style="margin-bottom:12px; width:30%; padding: .4em" />

                                        <script>
                                            
                                            function checksubmit(){
                                                var vt=document.getElementById('vt').value; //vacancy title
                                                var an=document.getElementById('an').value; //available number of vacancies
                                                var dl=document.getElementById('dl').value; //deadline
                                                var r=document.getElementById('r').value; //reference
                                                var d=document.getElementById('d').value; //description
                                                if(vt.length<=1){
                                                    document.getElementById('v1').innerHTML='<font color=red> Title Can\'t be short </font>'
                                                    return false;    
                                                }
                                                if(an.length<1){
                                                    document.getElementById('v2').innerHTML='<font color=red>Available Vacancies Can\'t be Empty</font>'
                                                    return false;
                                                }
                                                if(dl.length<=1){
                                                    document.getElementById('v3').innerHTML='<font color=red>DeadLine Must be provided</font>'
                                                    return false;    
                                                }
                                                if(r.length<=1){
                                                    document.getElementById('v4').innerHTML='<font color=red>Reference Can\'t be Empty</font>'
                                                    return false;    
                                                }
                                                if(d.length<=1){
                                                    document.getElementById('v5').innerHTML='<font color=red>Description  Can\'t be Empty</font>'
                                                    return false;    
                                                }
                                            }
                                            
                                            function valvt(){
                                                var vacancyTitle=document.getElementById('vt').value;
                                                if(vacancyTitle.length<=1)
                                                    document.getElementById('v1').innerHTML='<font color=red> Title Can\'t be short </font>'
                                                if(vacancyTitle.length >1)
                                                    document.getElementById('v1').innerHTML=""
                                                return false;
                                            }
                                        
                                            function valan(){
                                                var vacancyTitle=document.getElementById('an').value;
                                                if(vacancyTitle.length<1)
                                                    document.getElementById('v2').innerHTML='<font color=red>Available Vacancies Can\'t be Empty</font>'
                                                if(vacancyTitle.length >=1)
                                                    document.getElementById('v2').innerHTML=""
                                            }
                                            
                                            function valdl(){
                                                var vacancyTitle=document.getElementById('dl').value;
                                                if(vacancyTitle.length<1)
                                                    document.getElementById('v3').innerHTML='<font color=red>DeadLine Must be provided</font>'
                                                if(vacancyTitle.length >=1)
                                                    document.getElementById('v3').innerHTML=""
                                            }
                                            
                                            function valr(){
                                                var vacancyTitle=document.getElementById('r').value;
                                                if(vacancyTitle.length<1)
                                                    document.getElementById('v4').innerHTML='<font color=red>Reference Can\'t be Empty</font>'
                                                if(vacancyTitle.length >=1)
                                                    document.getElementById('v4').innerHTML=""
                                            }
                                            
                                            function vald(){
                                                var vacancyTitle=document.getElementById('d').value;
                                                if(vacancyTitle.length<1)
                                                    document.getElementById('v5').innerHTML='<font color=red>Description  Can\'t be Empty</font>'
                                                if(vacancyTitle.length >=1)
                                                    document.getElementById('v5').innerHTML=""
                                            }
                                            
                                            
                                            function reset(){
                                                
                                                document.getElementById('vt').innerHTML="";
                                                document.getElementById('an').innerHTML="";
                                                document.getElementById('dl').innerHTML="";
                                                document.getElementById('r').innerHTML="";
                                                document.getElementById('d').innerHTML="";
                                                document.getElementById('v1').innerHTML="";
                                                document.getElementById('v2').innerHTML="";
                                                document.getElementById('v3').innerHTML="";
                                                document.getElementById('v4').innerHTML="";
                                                document.getElementById('v5').innerHTML="";
                                            }
                                        </script>

                                    </html:form>

                                    <div>
                                        <div id="v1"></div>
                                        <div id="v2"></div>
                                        <div id="v3"></div>
                                        <div id="v4"></div>
                                        <div id="v5"></div>

                                    </div>
                                </div>


                                <div id="users-contain" class="ui-widget">

                                    <table id="users" style="alignment-adjust: central" class="ui-widget ui-widget-content">
                                        <thead>
                                            <tr class="ui-widget-header ">
                                                <th>vacancy Title</th>
                                                <th>Vacancies</th>
                                                <th>Position Type</th>
                                                <th>Deadline</th>
                                                <th>Reference</th>
                                                <th>Description</th>
                                                <th>Show Vacancy</th>
                                                <th>Update Vacancy</th>
                                                <th>Delete Vacancy</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <logic:iterate name="AdminBean" property="vac" id="msg">
                                                <tr>
                                                    <html:form action="/admin.do?actionType=VacancyUpdate">
                                                        <html:hidden value="${msg.vacancyId}" property="vacancyId" />
                                                        <td><html:text size="19" value="${msg.vacancyTitle}" property="vacancyTitle"/></td>
                                                        <td><html:text value="${msg.availableVacancyNumber}" property="availableVacancyNumber" size="3"/></td>
                                                        <td><html:text size="15" value="${msg.positionType}" property="positionType"/></td>
                                                        <td><html:text value="${msg.deadline}" property="deadline" size="10"/></td>
                                                        <td><html:text value="${msg.refrence}" property="refrence" size="5"/></td>
                                                        <td><html:textarea value="${msg.description}" property="description"/></td>
                                                        <td>
                                                            <html:select property="showVacancy" value="${msg.showVacancy}">
                                                                <html:option value="no">No</html:option>
                                                                <html:option value="yes">Yes</html:option>
                                                            </html:select>
                                                        <td><html:submit style="margin-bottom:12px; width:100%; padding: .4em;border-bottom:1px solid;padding:0!important;background:none!important;border:none"  value="Update"/></td>
                                                    </html:form>
                                                    <td><html:link   action="/admin?actionType=VacancyDelete" paramId="vacancyId" paramName="msg" paramProperty="vacancyId" >Delete</html:link></td>
                                                </tr>
                                            </logic:iterate>
                                        </tbody>
                                    </table>
                                </div>


                                <button id="create-user">Add new Vacancy</button>

                            </div>
                        </td>
                    </tr>

                    <tr>

                    </tr>

                    <tr>

                    </tr>

                    <tr>
                        <td colspan="2" class="footer">
                            <jsp:include page="parts/Footer.jsp"/>
                        </td>
                    </tr>
                </table>






            </div>
        </center>
    </body>
</html:html>

